<template>
  <div class="sub-div">
    <p>孙子组件</p>
    <p>汽车品牌：{{ car.name }}</p>
    <p>汽车价格：{{ car.price }}</p>
    <p>余额：{{ money }}</p>
    <p><button @click="updateMoney(10)">消费10元</button></p>
  </div>

</template>
<script setup lang="ts">
import { inject } from 'vue';
const {money, updateMoney} = inject('moneyContext',
 {money: 0, updateMoney: (value: number) => {}}
)

const {car} = inject('carContext',
 {car: {name: '', price: 0}}
)
</script>
<style lang="scss" scoped>
.sub-div {
  margin-top: 30px;
  padding: 10px 10px;
  color: #42b983;
  font-weight: bold;
  background-color: rgb(15, 105, 184);
}
</style>
